<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';

import {
  message,
  Select,
  SelectOption,
  TabPane,
  Tabs,
  TreeSelect,
} from 'ant-design-vue';
import { pinyin } from 'pinyin-pro';

import { useVbenForm } from '#/adapter/form';
import { postCategory, putCategory } from '#/api/portal/category';

const disabled = ref(true);
const activeKey = ref('1');
const category = ref();
const mergeValues: any = ref({
  more: {
    thumbnail: '',
    list_tpl: '',
    one_tpl: '',
  },
});
const [BasicForm, BasicFormApi] = useVbenForm({
  handleSubmit: (values) => {
    console.log(mergeValues.value)
    console.log(values)

    if (!mergeValues.value.more) {
      mergeValues.value.more = {};
    }
    mergeValues.value.more.thumbnail = values.thumbnail;
   // mergeValues.value.more.thumbnail = values.thumbnail;
    mergeValues.value = { ...mergeValues.value, ...values };
    onSubmit();
  },
  resetButtonOptions: {
    show: false,
  },
  schema: [
    {
      component: 'Input',
      dependencies: {
        show: false,
        // 随意一个字段改变时，都会触发
        triggerFields: ['id'],
      },
      fieldName: 'id',
      label: 'ID',
    },
    {
      component: 'TreeSelect',
      defaultValue: 0,
      fieldName: 'parent_id',
      label: '上级栏目',
    },
    {
      component: 'Select',
      defaultValue: '',
      componentProps: {
        placeholder: '请选择',
      },
      dependencies: {
        trigger: (values) => {
          disabled.value = !(values.name && values.module_id);
        },
        // 随意一个字段改变时，都会触发
        triggerFields: [
          'parent_id',
          'module_id',
          'name',
          'alias',
          'thumbnail',
          'description',
        ],
      },
      fieldName: 'module_id',
      label: '所属模块',
      rules: 'required',
    },
    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'name',
      label: '分类名称',
      rules: 'required',
    },
    {
      component: 'Input',
      defaultValue: '',
      dependencies: {
        trigger: (values, form) => {
          if (values.name && !values.id) {
            const alias = pinyin(values.name, {
              pattern: 'first',
              toneType: 'none',
            }).replaceAll(/\s+/g, '');
            form.setFieldValue('alias', alias);
          }
        },
        // 随意一个字段改变时，都会触发
        triggerFields: ['name'],
      },
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'alias',
      label: '分类别名',
    },
    {
      component: 'Textarea',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'description',
      label: '描述',
    },
    {
      component: 'Upload',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'thumbnail',
      label: '缩略图',
    },
  ],
});

const [SeoForm, SeoFormApi] = useVbenForm({
  handleSubmit: (values) => {
    mergeValues.value = { ...mergeValues.value, ...values };
    onSubmit();
  },
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'seo_title',
      label: 'SEO标题',
    },
    {
      component: 'Textarea',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'seo_keywords',
      label: 'SEO关键字',
    },
    {
      component: 'Textarea',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'seo_description',
      label: 'SEO描述',
    },
  ],
});

const [TemplateForm, TemplateFormApi] = useVbenForm({
  handleSubmit: (values) => {
    mergeValues.value.more.list_tpl = values.list_tpl;
    mergeValues.value.more.one_tpl = values.one_tpl;
    mergeValues.value = { ...mergeValues.value, ...values };
    onSubmit();
  },
  schema: [
    {
      component: 'Select',
      defaultValue: '',
      componentProps: {
        placeholder: '请选择',
      },
      fieldName: 'list_tpl',
      label: '列表模板',
    },
    {
      component: 'Select',
      defaultValue: '',
      componentProps: {
        placeholder: '请选择',
      },
      fieldName: 'one_tpl',
      label: '文章模板',
    },
  ],
});

const [Modal, formModalApi] = useVbenModal({
  fullscreenButton: false,
  footer: false,
  onBeforeClose() {
    activeKey.value = '1';
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const values: any = formModalApi.getData();
      if (values?.form) {
        BasicFormApi.setValues(values.form);
        SeoFormApi.setValues(values.form);
        TemplateFormApi.setValues(values.form);
        mergeValues.value = values.form;
      }
      category.value = values.category;
    }
  },
});

async function onSubmit() {
  function showMsg(msg: string) {
    message.success(msg);
    formModalApi.setData({ isUpdata: true });
    formModalApi.close();
  }
  const values: any = mergeValues.value;
  if (values.id) {
    const { msg } = await putCategory(values);
    showMsg(msg);
  } else {
    const { msg } = await postCategory(values);
    showMsg(msg);
  }
}
</script>
<template>
  <Modal class="w-3/5">
    <Tabs v-model:active-key="activeKey">
      <TabPane key="1" tab="基本属性">
        <BasicForm>
          <template #parent_id="slotProps">
            <TreeSelect
              v-bind="slotProps"
              :field-names="{
                value: 'id',
                key: 'id',
                label: 'name',
                children: 'children',
              }"
              :tree-data="category.categoriesTree"
              allow-clear
              placeholder="选择导航"
              show-search
              style="width: 100%"
              tree-node-filter-prop="label"
            />
          </template>
          <template #module_id="slotProps">
            <Select v-bind="slotProps" style="width: 100%">
              <SelectOption
                v-for="item in category.modules"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </SelectOption>
            </Select>
          </template>
        </BasicForm>
      </TabPane>
      <TabPane key="2" :disabled="disabled" tab="SEO设置">
        <SeoForm />
      </TabPane>
      <TabPane key="3" :disabled="disabled" tab="模板设置">
        <TemplateForm>
          <template #list_tpl="slotProps">
            <Select v-bind="slotProps" style="width: 100%">
              <SelectOption
                v-for="item in category.listThemeFiles"
                :key="item.id"
                :value="item.file"
              >
                {{ `${item.name} ${item.file}` }}
              </SelectOption>
            </Select>
          </template>
          <template #one_tpl="slotProps">
            <Select v-bind="slotProps" style="width: 100%">
              <SelectOption
                v-for="item in category.articleThemeFiles"
                :key="item.id"
                :value="item.file"
              >
                {{ `${item.name} ${item.file}` }}
              </SelectOption>
            </Select>
          </template>
        </TemplateForm>
      </TabPane>
    </Tabs>
  </Modal>
</template>

<style lang="scss" scoped></style>
